<template>
  <!-- 发红包面板 -->
  <div class="send-redpacket">
    <header class="header flexbox">
      <div class="item" @click="onCancel">
        <span>取消</span>
      </div>
      <div class="title">
        <span>发蓝卡</span>
      </div>
      <div class="item"></div>
    </header>
    <section class="flex-center column">
      <div class="input-box">
        <div class="title ellipsis">
          <span>
            <span class="pin" v-if="redType === 1">拼</span>
            {{ redType === 1 ? '总数量' : '单个数量' }}</span>
        </div>
        <div class="input-wrapper">
          <input type="number" v-model="amount" placeholder="0.00"/>
        </div>
        <div class="unit ellipsis">
          <span>积分</span>
        </div>
      </div>

      <div class="desc">
        当前为{{ redType === 1 ? '拼手气' : '普通' }},
        <span class="change-type" @click="onChangeType">改为{{ redType === 0 ? '拼手气' : '普通' }}</span>
      </div>

      <div class="input-box">
        <div class="title">
          <span>个数</span>
        </div>
        <div class="input-wrapper">
          <input type="number" v-model="number" placeholder="填写个数"/>
        </div>
        <div class="unit">
          <span>个</span>
        </div>
      </div>

      <div class="desc">
        本群共{{ groupMembers.length }}人
      </div>

      <div class="input-box">
        <div class="input-wrapper" id="msg-wrapper">
          <!-- 提示语 -->
          <input type="text" v-model="remark" placeholder="积分多多，欢乐多多" />
        </div>
      </div>

      <!-- <div class="total-amount">
        <span>{{ totalAmount }}</span>
      </div> -->

      <div class="action flex-center">
        <div class="send-button" :class="{enabled: enabled}" @click="onSendRedpacket">发送蓝卡</div>
      </div>
    </section>

    <footer>
      <span class="tip">未领取的积分, 将于24小时后退回</span>
    </footer>
  </div>
</template>

<script lang="ts">
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { Component, Vue, Prop } from "vue-property-decorator";
import MessageMixin from '@/mixins';
import { MsgTypeKV } from '@/api/socket/imClient';
import { Webim } from '@/utils/types';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');
@Component<SendRedpacket>({
  mixins: [MessageMixin],
})
export default class SendRedpacket extends Vue {
  // 表示映射chat模块下的mutation方法

  @Prop({})
  card: any;

  @userModule.State("groupMembers") groupMembers: any;

  @userModule.State("selToID") selToID: any;
  @userModule.State("selSess") selSess: any;
  @userModule.State("selType") selType: any;
  @userModule.State("loginInfo") loginInfo: any;
  @userModule.State("friendHeadUrl") friendHeadUrl: any;
  @userModule.Action("saveSelSessFN") saveSelSessFN: any;
  @userModule.Action("saveSelToIDFN") saveSelToIDFN: any;

  @chatModule.State("groupSetting") groupSetting: any;

  

  private amount: string = '';
  private number: string = '';
  // 红包类型 0 普通   1 手气
  private redType: number = 1;

  private remark: string = '积分多多，欢乐多多';

  private eventList: any = ['$sendRedpacket']

  private get enabled() {
    return Number(this.amount) > 0 && Number(this.number) > 0;
  }

  private get totalAmount() {
    return this.redType === 1 ? this.amount : Number(this.amount) * Number(this.number);
  }



  protected mounted() {
    this.initEvents(this.eventList);
  }

  private onCancel() {
    this.$emit('hide');
    this.amount = '0';
    this.number = '1';
  }

  /**
   * 发送红包
   */
  private onSendRedpacket() {

    if (!this.enabled) {
      return;
    }

    if (Number(this.number) > 100) {
      return this.$createToast({
        txt: "最多可发100个",
        type: "warn",
        time: 3000
      }).show();
    }

    if (Number(this.amount) / Number(this.number) < 0.01) {
      return this.$createToast({
        txt: "单个积分不可小于0.01",
        type: "warn",
        time: 3000
      }).show();
    }

    this.$createDialog({
      type: 'confirm',
      icon: 'cubeic-alert',
      title: '确认发送积分吗?',
      confirmBtn: {
        text: '确定',
        active: true,
        disabled: false,
        href: 'javascript:;'
      },
      cancelBtn: {
        text: '取消',
        active: false,
        disabled: false,
        href: 'javascript:;'
      },
      onConfirm: () => {
        this.sendRedpacket();
      },
      onCancel: () => {
        // this.amount = '0';
        // this.number = '1';
      }
    }).show();
  }

  private onChangeType() {
    if (this.redType === 0) {
      this.redType = 1;
    } else {
      this.redType = 0
    }
  }

  /**
 * 发送自定义的tip消息
 */
  private sendCustomTip(packet: any) {
    if (!this.selToID) {
      this.$createToast({
        txt: "您还没有选择群，暂不能聊天",
        type: "warn",
        time: 3000
      }).show();
      return;
    }

    let data = JSON.stringify(packet.content);
    let desc = "message-redpacket";
    let ext = packet.ext;
    let msgLen = webim.Tool.getStrBytes(data);
    if (data.length < 1) {
      return;
    }
    let maxLen, errInfo;
    if (this.selType == webim.SESSION_TYPE.C2C) {
      maxLen = webim.MSG_MAX_LENGTH.C2C;
      errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
    } else {
      maxLen = webim.MSG_MAX_LENGTH.GROUP; // 八千字节
      errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
    }
    if (msgLen > maxLen) {
      this.$createToast({
        txt: errInfo,
        type: "warn",
        time: 3000
      }).show();
      return;
    }
    let selSess = webim.MsgStore.sessByTypeId(
      webim.SESSION_TYPE.GROUP,
      this.selToID,
    );
    if (!selSess) {
      selSess = new webim.Session(
        this.selType,
        this.selToID,
        this.selToID,
        this.friendHeadUrl,
        Math.round(new Date().getTime())
      );
      this.saveSelSessFN(selSess);
    }

    let msg = new webim.Msg(
      selSess,
      true,
      -1,
      -1,
      -1,
      this.loginInfo.identifier,
      0,
      this.loginInfo.identifierNick
    );
    let customObj = new webim.Msg.Elem.Custom(data, desc, ext);
    msg.addCustom(customObj);
    //调用发送消息接口
    webim.sendMsg(
      msg,
      (resp) => { },
      (err) => {
        // this.$createToast({
        //   txt: err.ErrorInfo,
        //   type: "warn",
        //   time: 3000
        // }).show();
      }
    );

  }

  private sendRedpacket() {
    let packet = {
      amount: Number(this.amount),
      redType: this.redType,
      remark: this.remark,
      number: this.number,
    };
    this.sendMessage(MsgTypeKV.sendRedpacket, packet);
  }

  /**
 * 获取到发送成功的消息后 作为消息发送出去
 */
  private $sendRedpacket(data: any) {
    if (data.result === 0) {
      let packet = {
        content: data.red,
        ext: 'message'
      }
      this.sendCustomTip(packet);
      this.onCancel();

    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

}
</script>

<style lang="stylus" scoped>
.send-redpacket
  width 100% 
  height 100% 
  position fixed 
  left 0 
  background #f1f1f1
  z-index 999

.header 
  height 44px
  line-height 44px
  margin-bottom 12px
  .item 
    flex-basis 16% 
  .title 
    flex-basis 68%
    font-weight bold


.input-box 
  background white
  border-radius 4px
  width 90% 
  height 56px
  line-height 56px 
  padding 10px 8px
  box-sizing border-box 
  display flex
  justify-content center 
  align-items center
  margin-top 16px 
  .title 
    flex-basis 40% 
    width 40%
    font-size 14px
    color #666666
    height 56px
    line-height 56px
    text-align left
  .input-wrapper 
    flex-basis 40% 
    width 40%
    height 56px
    line-height 56px
    input 
      width 100% 
      height 100% 
      border none 
      outline none 
      text-align right
      height 56px
      line-height 56px
  .unit 
    flex-basis 20%   
    width 20%
    height 56px
    line-height 56px
    font-size 16px
    color #666666

.total-amount
  font-size 44px 
  font-weight bolder 
  height 120px 
  line-height 120px 
  width 100% 
  text-align center 

.action
  height 64px
  width 100% 
  .send-button 
    width 160px 
    height 36px 
    background #ffb2ac 
    color white 
    font-size 16px 
    line-height 36px 
    &.enabled 
      background #f44336 

footer
  position absolute 
  bottom 6px 
  width 100% 
.tip 
  font-size 11px 
  color #909090

.change-type 
  color #e4a62e
.desc 
  font-size 12px
  width 100%
  height 24px
  text-align left
  padding-left 20px
  box-sizing border-box
  margin-top 6px
.pin
  font-size 11px 
  background #e4a62e
  border-radius 2px
  display inline-block
  width 15px
  height 15px
  line-height 15px
  color white
  bottom 5px
  padding 1px

#msg-wrapper
  width 100% 
  height 50px
  line-height 50px
  flex-basis 100%
  input 
    width 100%
    text-align center
    line-height 56px
    height 56px

</style>

